<template>
  <div class="memberView">
    <div class="backButton" @click="router.back()">
      <span class="iconfont icon-likesprogramfanhui"></span>
      返回
    </div>
    <div class="memberCard">
      <div class="cardHeader">
        <div class="title">Plus 会员</div>
        <div class="subtitle">解锁更多学习特权</div>
      </div>
      <div class="cardContent">
        <div class="benefitList">
          <div class="benefitItem">
            <span class="iconfont icon-likesprogramVIP"></span>
            <div class="benefitInfo">
              <div class="benefitTitle">专属题库</div>
              <div class="benefitDesc">解锁高级题库内容</div>
            </div>
          </div>
          <div class="benefitItem">
            <span class="iconfont icon-likesprogramAI"></span>
            <div class="benefitInfo">
              <div class="benefitTitle">AI助手</div>
              <div class="benefitDesc">智能解答学习疑问</div>
            </div>
          </div>
          <div class="benefitItem">
            <span class="iconfont icon-likesprogramshoucang"></span>
            <div class="benefitInfo">
              <div class="benefitTitle">无限收藏</div>
              <div class="benefitDesc">题目笔记随心收藏</div>
            </div>
          </div>
        </div>
        <div class="priceCards">
          <div class="priceCard" v-for="(plan, index) in membershipPlans" :key="index"
            :class="{ active: selectedPlan === index }" @click="selectedPlan = index">
            <div class="duration">{{ plan.duration }}</div>
            <div class="price">
              <span class="symbol">¥</span>
              <span class="amount">{{ plan.price }}</span>
            </div>
            <div class="perMonth">¥{{ (plan.price / plan.months).toFixed(2) }}/月</div>
          </div>
        </div>
        <div class="purchaseButton" @click="handlePurchase">
          立即开通
        </div>
      </div>
    </div>

    <!-- 支付方式选择弹窗 -->
    <MessageDialog ref="paymentDialog">
      <template #title>
        <span>选择支付方式</span>
      </template>
      <template #content>
        <div class="paymentMethods">
          <div class="paymentMethod" v-for="method in paymentMethods" :key="method.id"
            :class="{ active: selectedPayment === method.id }" @click="selectPaymentMethod(method.id)">
            <span class="iconfont" :class="method.icon"></span>
            <span class="methodName">{{ method.name }}</span>
          </div>

          <!-- 支付宝支付表单 -->
          <div class="paymentForm" v-if="selectedPayment === 1">
            <div class="formTitle">支付宝支付</div>
            <div class="formItem">
              <label>支付宝账号</label>
              <input type="text" v-model="alipayForm.account" placeholder="请输入支付宝账号" />
            </div>
            <div class="formItem">
              <label>支付密码</label>
              <input type="password" v-model="alipayForm.password" placeholder="请输入支付密码" maxlength="6" />
            </div>
          </div>

          <!-- 微信支付表单 -->
          <div class="paymentForm" v-if="selectedPayment === 2">
            <div class="formTitle">微信支付</div>
            <div class="qrCodeContainer">
              <div class="qrCode">
                <span class="iconfont icon-likesprogramerweima"></span>
              </div>
              <div class="qrCodeTip">请使用微信扫码支付</div>
            </div>
          </div>

          <!-- 银行卡支付表单 -->
          <div class="paymentForm" v-if="selectedPayment === 3">
            <div class="formTitle">银行卡支付</div>
            <div class="formItem">
              <label>银行卡号</label>
              <input type="text" v-model="bankForm.cardNumber" placeholder="请输入银行卡号" maxlength="19"
                @input="formatCardNumber" />
            </div>
            <div class="formItem">
              <label>持卡人姓名</label>
              <input type="text" v-model="bankForm.name" placeholder="请输入持卡人姓名" />
            </div>
            <div class="formItem">
              <label>支付密码</label>
              <input type="password" v-model="bankForm.password" placeholder="请输入支付密码" maxlength="6" />
            </div>
          </div>

          <div class="paymentAmount">
            <span class="label">支付金额：</span>
            <span class="amount">¥{{ membershipPlans[selectedPlan].price }}</span>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialogFooter">
          <button class="cancelBtn" @click="paymentDialog?.Close()">取消</button>
          <button class="confirmBtn" @click="handlePaymentConfirm">确认支付</button>
        </div>
      </template>
    </MessageDialog>

    <!-- 支付成功弹窗 -->
    <MessageDialog ref="successDialog">
      <template #title>
        <span>支付成功</span>
      </template>
      <template #content>
        <div class="successContent">
          <span class="iconfont icon-likesprogramzhengque successIcon"></span>
          <div class="successMessage">
            <div class="mainText">支付成功！</div>
            <div class="subText">您已成功开通{{ membershipPlans[selectedPlan].duration }}</div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialogFooter">
          <button class="confirmBtn" @click="handlePaymentSuccess">确定</button>
        </div>
      </template>
    </MessageDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import MessageDialog from '@/components/MessageDialog.vue';
import { ElLoading } from 'element-plus';
import 'element-plus/es/components/loading/style/css';

const router = useRouter();
const paymentDialog = ref<InstanceType<typeof MessageDialog> | null>(null);
const successDialog = ref<InstanceType<typeof MessageDialog> | null>(null);

const membershipPlans = [
  { duration: '月度会员', price: 29.9, months: 1 },
  { duration: '季度会员', price: 79.9, months: 3 },
  { duration: '年度会员', price: 299.9, months: 12 }
];

const selectedPlan = ref(2); // 默认选中年度会员

// 支付方式列表
const paymentMethods = [
  { id: 1, name: '支付宝支付', icon: 'icon-likesprogramzhifubao' },
  { id: 2, name: '微信支付', icon: 'icon-likesprogramweixin' },
  { id: 3, name: '银行卡支付', icon: 'icon-likesprogramyinhangka' }
];

const selectedPayment = ref(1); // 默认选择支付宝

// 支付表单数据
const alipayForm = ref({
  account: '',
  password: ''
});

const bankForm = ref({
  cardNumber: '',
  name: '',
  password: ''
});

// 支付验证状态
const paymentVerified = ref(false);

const handlePurchase = () => {
  paymentDialog.value?.Show();
};

// 选择支付方式
const selectPaymentMethod = (methodId: number) => {
  selectedPayment.value = methodId;
  // 重置表单
  alipayForm.value = { account: '', password: '' };
  bankForm.value = { cardNumber: '', name: '', password: '' };
  paymentVerified.value = false;
};

// 格式化银行卡号
const formatCardNumber = (event: Event) => {
  const input = event.target as HTMLInputElement;
  let value = input.value.replace(/\D/g, '');
  value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
  bankForm.value.cardNumber = value;
};

// 验证支付信息
const validatePayment = (): boolean => {
  switch (selectedPayment.value) {
    case 1: // 支付宝
      if (!alipayForm.value.account || !alipayForm.value.password) {
        alert('请填写完整的支付宝账号和密码');
        return false;
      }
      if (alipayForm.value.password.length !== 6) {
        alert('支付密码必须是6位数字');
        return false;
      }
      break;
    case 2: // 微信
      // 微信扫码支付不需要验证表单
      return true;
    case 3: // 银行卡
      if (!bankForm.value.cardNumber || !bankForm.value.name || !bankForm.value.password) {
        alert('请填写完整的银行卡信息');
        return false;
      }
      if (bankForm.value.password.length !== 6) {
        alert('支付密码必须是6位数字');
        return false;
      }
      if (bankForm.value.cardNumber.replace(/\s/g, '').length < 16) {
        alert('请输入正确的银行卡号');
        return false;
      }
      break;
  }
  return true;
};

const handlePaymentConfirm = () => {
  if (!validatePayment()) return;

  // 模拟支付处理
  paymentDialog.value?.Close();
  const loadingDialog = ElLoading.service({
    lock: true,
    text: '支付处理中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  // 模拟支付过程
  setTimeout(() => {
    loadingDialog.close();
    successDialog.value?.Show();
  }, 2000);
};

const handlePaymentSuccess = () => {
  successDialog.value?.Close();
  router.push('/'); // 支付成功后跳转到首页
};
</script>

<style scoped>
.memberView {
  width: 100%;
  max-width: 1200px;
  padding: 40px 20px;
  margin: 0 auto;
  position: relative;
}

.backButton {
  position: absolute;
  left: 40px;
  top: 60px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  font-size: 14px;
}

.backButton:hover {
  transform: translateX(-3px);
  color: #41B9FF;
  box-shadow: 0 2px 15px rgba(65, 185, 255, 0.2);
}

.backButton .iconfont {
  font-size: 16px;
}

.memberCard {
  background: linear-gradient(145deg, #ffffff, #f8f8f8);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.cardHeader {
  text-align: center;
  margin-bottom: 40px;
}

.cardHeader .title {
  font-size: 32px;
  font-weight: bold;
  color: #41B9FF;
  margin-bottom: 10px;
}

.cardHeader .subtitle {
  font-size: 16px;
  color: #666;
}

.benefitList {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}

.benefitItem {
  display: flex;
  align-items: center;
  gap: 15px;
}

.benefitItem .iconfont {
  font-size: 32px;
  color: #41B9FF;
}

.benefitInfo .benefitTitle {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.benefitInfo .benefitDesc {
  font-size: 14px;
  color: #666;
}

.priceCards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.priceCard {
  width: 200px;
  padding: 20px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.priceCard:hover {
  transform: translateY(-5px);
}

.priceCard.active {
  border: 2px solid #41B9FF;
  transform: translateY(-5px);
}

.priceCard .duration {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.priceCard .price {
  color: #41B9FF;
  margin-bottom: 5px;
}

.priceCard .price .symbol {
  font-size: 20px;
  font-weight: 500;
}

.priceCard .price .amount {
  font-size: 32px;
  font-weight: bold;
}

.priceCard .perMonth {
  font-size: 14px;
  color: #666;
}

.purchaseButton {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background: linear-gradient(145deg, #41B9FF, #3aa8e6);
  border-radius: 25px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.purchaseButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(65, 185, 255, 0.3);
}

.purchaseButton:active {
  transform: translateY(0);
}

.paymentMethods {
  padding: 20px;
  min-width: 400px;
}

.paymentMethod {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  margin: 10px 0;
  border-radius: 10px;
  background: #f8f8f8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.paymentMethod:hover {
  background: #f0f0f0;
}

.paymentMethod.active {
  background: rgba(65, 185, 255, 0.1);
  border: 1px solid #41B9FF;
}

.paymentMethod .iconfont {
  font-size: 24px;
  color: #41B9FF;
}

.paymentMethod .methodName {
  font-size: 16px;
  color: #333;
}

.paymentAmount {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.paymentAmount .label {
  font-size: 16px;
  color: #666;
}

.paymentAmount .amount {
  font-size: 24px;
  font-weight: bold;
  color: #41B9FF;
}

.dialogFooter {
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.dialogFooter button {
  padding: 8px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.dialogFooter .cancelBtn {
  background: #f5f5f5;
  color: #666;
}

.dialogFooter .cancelBtn:hover {
  background: #e8e8e8;
}

.dialogFooter .confirmBtn {
  background: #41B9FF;
  color: white;
}

.dialogFooter .confirmBtn:hover {
  background: #3aa8e6;
}

.successContent {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.successContent .successIcon {
  font-size: 48px;
  color: #52c41a;
}

.successContent .successMessage {
  text-align: center;
}

.successContent .mainText {
  font-size: 24px;
  font-weight: bold;
  color: #52c41a;
  margin-bottom: 10px;
}

.successContent .subText {
  font-size: 16px;
  color: #666;
}

.paymentForm {
  margin-top: 20px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 10px;
}

.formTitle {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.formItem {
  margin-bottom: 15px;
}

.formItem label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.formItem input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.formItem input:focus {
  outline: none;
  border-color: #41B9FF;
  box-shadow: 0 0 0 2px rgba(65, 185, 255, 0.2);
}

.qrCodeContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.qrCode {
  width: 150px;
  height: 150px;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qrCode .iconfont {
  font-size: 100px;
  color: #41B9FF;
}

.qrCodeTip {
  font-size: 14px;
  color: #666;
}
</style>